<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的四点半课堂" autoBack>
			</u-navbar>
		</view>


		<view class="con-body wrap">
			<view style="background-color: #FFFFFF;margin-top: 1px;">
				<u-tabs :list="tabs" lineColor="#0B868E" :current="current" @change="changeTabs">
				</u-tabs>
			</view>

			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;"
				v-for="(item,index) in list" :key="index">
				<view class="user-list">
					<view class="title">
						<view style="float: left; clear: both;">
							<text>四点半课堂</text>
						</view>
						<view style="float: right; margin-right: 20rpx; color: #666666; font-weight: 400;">
							<text>{{item.status_label}}</text>
						</view>

					</view>
					<u-line></u-line>
					<view style="padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx;">
						<view class="d_view">
							<text class="l_title">已选项目</text>
							<text class="d_content">{{item.title}}</text>
						</view>

						<view class="d_view">
							<text class="l_title">服务日期</text>
							<text class="d_content">{{item.time}}</text>
						</view>

						<view class="d_view">
							<text class="l_title">服务时间</text>
							<text class="d_content">{{item.memo}}</text>
						</view>

						<view class="d_view">
							<text class="l_title">服务天数</text>
							<text class="d_content">{{item.during}}天</text>
						</view>

						<view class="d_view" v-if="item.fee != 0">
							<text class="l_title">服务费用</text>
							<text class="d_content">{{item.fee}}元/天</text>
						</view>

						<view class="d_view" v-else>
							<text class="l_title">服务费用</text>
							<text class="d_content">免费</text>
						</view>

						<view class="d_view" v-if="item.status == 1">
							<text class="l_title">订单编号</text>
							<text class="d_content">{{item.order_no}}</text>
						</view>
						<view class="d_view" v-if="item.status == 1">
							<text class="l_title">实际支付</text>
							<text class="d_content">{{item.pay}}元</text>
						</view>
						<view class="d_view" v-if="item.status == 1">
							<text class="l_title">下单时间</text>
							<text class="d_content">{{$u.timeFormat(item.pay_time, 'yyyy年mm月dd日')}}</text>
						</view>
					</view>
					<u-line></u-line>
					<view style="width: 20%; margin-right: 20rpx; margin-top: 10rpx;float: right;">
						<u-button size="small" color="#0B868E" type="primary" plain shape="circle"
							@click="intoDetail(item.id)">查看详情
						</u-button>
					</view>
					<view style="width: 20%; margin-right: 20rpx; margin-top: 10rpx;float: right;"
						v-if="item.status == 2">
						<u-button size="small" color="#0B868E" type="primary" plain shape="circle"
							@click="pay(item.id)">付款</u-button>
					</view>
					<view style="width: 20%; margin-right: 20rpx; margin-top: 10rpx;float: right;"
						v-if="item.status == 3 || item.status == -1">
						<u-button size="small" color="#0B868E" type="primary" plain shape="circle"
							@click="toshowModal(item)">删除</u-button>
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="showDel" title="确定删除此条四点半订单吗？" width="500rpx" @confirm="comfirm" @cancel="showDel = false" showCancelButton> </u-modal>
		</view>
	</view>
</template>

<script>
	import {
		getMySchool,
		paySchool,
		delSchool
	} from "@/service/shareService.js";
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待审核'
					},
					{
						name: '待支付'
					},
					{
						name: '进行中'
					},
					{
						name: '已取消'
					},
					{
						name: '已结束'
					}
				],
				list: [],
				showEmpty: false,
				showDel: false,
				item:{},
			}
		},
		onLoad() {
			getMySchool().then(this.getMySchool);
		},
		methods: {
			getMySchool(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.list = e.result;
				} else {
					this.list = [];
					this.showEmpty = true;
				}
			},
			toshowModal(item){
				this.item=item;
				this.showDel=true
			},
			comfirm(){
				delSchool({
					id:this.item.id
				}).then(res=>{
					if(res.code==200){
						this.showDel=false;
						this.$refs.uToast.show({
						
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								
							}
						})
						this.current=0;
						getMySchool().then(this.getMySchool);
					}else{
						this.$refs.uToast.show({
						
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			},
			changeTabs(e) {
				let par;
				// console.log(e);
				this.current = e.index;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						break;
					case 2:
						par = {
							status: 2
						};
						break;
					case 3:
						par = {
							status: 1
						};
						break;
					case 4:
						par = {
							status: -1
						};
						break;
					case 5:
						par = {
							status: 3
						};
						break;
					default:
						par = {
							status: 99
						};
				}
				getMySchool(par).then(this.getMySchool);
			},
			intoDetail(id) {
				this.$u.route({
					url: 'pagesShare/mine/schoolDetail',
					params: {
						id: id
					}
				})
			},
			pay(id) {
				paySchool({
					id: id
				}).then(this.result);
			},
			result(e) {
				if (e.code == 200) {
					if (e.result == 'success') {
						uni.showToast({
							title: e.msg,
							icon: "success",
							complete() {
								uni.navigateBack({
									delta: 2
								})
							}
						});
					} else {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: e.result.timeStamp,
							nonceStr: e.result.nonceStr,
							package: e.result.package,
							signType: 'MD5',
							paySign: e.result.paySign,
							success: this.success,
							fail: function(err) {
								showToast(err.requestPayment);
							}
						});
					}
				} else {
					uni.showToast({
						title: e.msg,
						icon: "error"
					});
				}
			},
			success(){
				uni.showToast({
					title: '支付成功',
					icon: "success",
					complete() {
						uni.navigateBack({
							delta: 2
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		color: #666666;
		font-size: 32rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
</style>
